<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>New ThinkJS Application</title>
  <style>
    *{padding: 0;margin: 0;font-size: 16px;line-height: 20px;font-family: arial;}
body{background: #000000;color:#fff}
a, a:visited{color:#337ab7;text-decoration: none;}
header{padding: 70px 0 70px 0;background-color: #4A6495}
h1{font-size: 36px;color:#fff;font-weight: normal;display: inline-block;width: 70%;text-align: center;}
code{  padding: 2px 4px;font-size: 90%;color: #c7254e;background-color: #f9f2f4;border-radius: 4px;}
.content{width: 1000px;margin: auto}
.wrap{width: 1000px;margin: auto}
.content{margin-top: 10px;}
.list .item{position: relative;padding-left: 70px;margin-top: 10px;}
.item a {margin-right: 10px;color:antiquewhite;}
@-webkit-keyframes flash {
            0% {
                /* opacity: 0; */
            }

            50% {
                /* opacity: 1; */
                /* color: #ff0000; */
                /* font-size: 18px; */
                background: red;
            }

            100% {
                /* opacity: 0; */
            }
        }

        @keyframes flash {
            0% {
                /* opacity: 0; */
            }

            50% {
                /* opacity: 1; */
                /* color: #ff0000; */
                /* font-size: 18px; */
                background: rgb(97, 87, 87);
            }

            100% {
                /* opacity: 0; */
            }
        }

        .flash {
            -webkit-animation: flash 1s infinite cubic-bezier(1, 0, 0.5, 0);
            animation: flash 1s infinite cubic-bezier(1, 0, 0.5, 0);
            /* animation-iteration-count: 10;
            -webkit-animation-iteration-count: 2; */
            /* Safari 和 Chrome */
        }
        .pop{
          position: fixed;
          display: block;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #000000;
          text-align: center;
        }
        .pop > div{
          padding: 20px;
          width: 500px;
          height: 500px;
          border: #4d4a4a solid 2px;
          border-radius: 10px;
          margin-top:100px;
          margin-left: auto;
          margin-right: auto;
        }
        .pop > div>div{
          text-align: left;
        }
</style>
  <script type="text/javascript" src="./static/js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="./static/js/vue.js"></script>
</head>

<body>
  <!-- <header>
    <div class="wrap">
      <h1>看看提示吧</h1>
    </div>
  </header> -->
  <div class="content">
    <div class="list" id="list">
      <div class="item" v-for="(value, key) in items">
        <a style="display: block;" v-text="key"></a>
        <div style="display:inline-block;background: #4A6495;margin-right: 20px;" v-for="(v, k) in value">
          <a v-text="k"></a><a v-text="getfjl(v)"></a><a v-text="'大'+v.d" @click="showPop(key,v,k+'  “大”  @'+v.d,'d')"></a>
          <a v-text="'小'+v.x" @click="showPop(key,v,k+'  “小”  @'+v.x,'x')"></a>
        </div>
      </div>
    </div>
  </div>
  <div class="pop" id="pop" v-show="config.isShow">
    <div>
      <span style="position:absolute;top:20px;right:20px;" @click="toggle()">关闭</span>
      <span v-text="item.matches"></span>
      <div style="margin-top:19px;">
        <span>选择项：</span>
        <h1 v-text="item.select"></h1>
      </div>
      <div style="margin-top: 52px;">
        <span>投注金额：</span>
        <span>
          <input type="number" name="" id="bj" value="8000" v-model="bj">
        </span>
      </div>
      <div style="font-size:100px;margin-top: 52px;">
        <span>平衡点：</span>
        <h1 v-text="cal1()"></h1>
      </div>
      <div style="margin-top: 52px;">
        <span>对方投注：</span>
        <h1 v-text="cal2()"></h1>
      </div>
      <div style="margin-top: 52px;">
        <span>1手赔率：</span>
        <input type="number" name=""  value="0" v-model="tpo" style="width: 120px;">
      </div>
      <div >
        <span>补1赔率：</span>
        <input type="number" name="" value="0" v-model="tp1" style="width: 120px;">
        <span>补1金额：</span>
        <input type="number" name="" value="0" v-model="tp2" style="width: 120px;">
        <span style="color:#c7254e;" @click="clear()">清空</span>
      </div>
      <div>
        <span style="margin-top:5px;">剩余奖金： </span>
        <span v-text="resJJ()"></span>
      </div>
    </div>
  </div>
</body>
<script>
  var pop = new Vue({
    el: '#pop',
    data: {
      item: {
        matches: '',
        select: '',
        dx: 'd',
        od123:0,//保存所选择的赔率
        odd: {
          d: 1,
          x: 1
        }
      },
      bj: 8000,
      phd: 0,
      dftz: 0,
      tpo:0,//1手赔率
      tp1:0,//补1赔率
      tp2:0,//补1金额
      config: {
        isShow: false
      }
    },
    watch: {
      odd: function (n, o) {
        console.log(n,o);
      },
      tpo:function(n,o){
        console.log(n,o);
      }
    },
    methods: {
      toggle: function () {
        if (pop.config.isShow) {//关闭情况保存的数据
          this.item = {
            matches: '',
            select: '',
            od123:0,
            dx: 'd',
            odd: {
              d: 1,
              x: 1
            }
          };
          app.espc = null;
        }
        pop.config.isShow = pop.config.isShow ? false : true;
      },
      cal1: function () {
        return (1 / this.item.odd[this.item.dx]).toFixed(2);
      },
      cal2: function () {
        var p = (1 / this.item.odd[this.item.dx]);
        var bj = this.bj;
        if (bj <= 0) return;
        var jj = bj * (this.item.odd[this.item.dx] + 1);
        return (jj / (1 + p)).toFixed(0);
      },resJJ:function(){
        var jj1=this.bj*(parseFloat(this.tpo)+1);
        var jj2=(parseFloat(this.tp1)+1)*parseInt(this.tp2);
        return parseInt(jj1-jj2);
      },clear(){
        // this.tpo=0;//1手赔率
        this.tp1=0;//补1赔率
        this.tp2=0;//补1赔率
      }
    }
  });
  var app = new Vue({
    el: '#list',
    data: {
      items: {},
      espc: null
    },
    created: function () {
      this.getData();
    },

    methods: {

      getData: function (event) {
        $.ajax({
          type: 'GET',
          url: '/dev1/get',
          dataType: 'json',
          timeout: 30000,
          success: function (data) {
            app.items = data;
            if (!app.espc) return;
            // console.log(app.espc);
            var m = data[app.espc.matches];
            if (!m) {
              //比赛没了，说明产生变化
              alert('比赛结束');
              app.espc=null;
              return;
            }
            var str = app.espc.select.split(' ');
            if (!str[0]) {
              //变了
              app.attention();
              alert('盘口关闭');
              app.espc=null;
              return;
            }
            var odd = m[str[0]];
            // console.log(odd.x,'---',app.espc.odd.x)\
            if(!odd) {
              app.attention();
              alert('盘口关闭')
              return;
            }
            if (odd.x != app.espc.odd.x || odd.d != app.espc.odd.d) {
              //变了
              app.attention();
              app.espc.select=app.espc.select.split('@')[0]+'@'+odd[app.espc.dx]
              app.espc.odd.x=odd.x;
              app.espc.odd.d=odd.d;
            }
          },
          error: function (xhr, type) {
            console.log('Ajax error!')
          }
        })
      },
      showPop: function (name, obj1, oddd, dx) {
        var xzpl=obj1[dx];
        var obj = {
          matches: name,
          select: oddd,
          dx: dx,
          od123:xzpl,
          odd: obj1
        }
        pop.tpo=obj1[dx];
        pop.item = obj;
        this.espc = obj;
        pop.toggle();
      },getfjl(d){
        var num = 1/(d.d+1)+1/(d.x+1);
        return (1/num).toFixed(2);
      }
      ,
      flash: function (id) {
        $('#' + id).removeClass('flash'); setTimeout(function () { $('#' + id).addClass('flash') }, 200);
      },attention:function(){
        $('#pop').addClass('flash');
        setTimeout(function(){
          $('#pop').removeClass('flash');
        },3000)
      }
    }, filters: {
      timeFormat: function (time) {
        return time.substr(5, 10);
      },
      getTwo: function (num) {
        return parseFloat(num).toFixed(2);
      }
    }
  })
  setInterval(app.getData, 2000);
</script>

</html>